<template>
  <div class="city-list">
    <div class="initial" v-if="letter">
      <span class="letter">{{ letter }}</span>
      <span v-if="letter === 'A'" class="text">(按字母排序)</span>
    </div>
    <div class="city">
      <city-list-item
        v-for="(item, index) in cities"
        :key="index"
        :item="item"
      />
    </div>
  </div>
</template>

<script>
import CityListItem from "./CityListItem";
export default {
  props: {
    cities: {
      type: Array,
      default() {
        return [];
      },
    },
    letter: {
      type: String,
      defalut: "",
    },
  },
  components: {
    CityListItem,
  },
};
</script>
<style lang="less" scoped>
.city-list {
  display: flex;
  flex-wrap: wrap;
  .initial {
    width: 100%;
    padding: 10px;
    border-bottom: 1px solid #eaeaee;
    font-size: 12px;
    .text {
      margin-left: 10px;
      color: #ceb1b0;
    }
  }
  .city {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
}
</style>